<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
        <el-button
          style="float: right; margin-botton: 20px"
          type="primary"
          size="small"
          @click="handleAdd"
          >添加商品</el-button
        >
      </div>
      <el-input
        v-model="inputText"
        placeholder="请输入内容"
        style="width: 250px"
        size="small"
      />
      <el-button
        type="primary"
        @click="search"
        style="margin-left: 8px"
        size="small"
        >搜索</el-button
      >
      <el-table
        :data="
          buyList.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        style="width: 100%"
      >
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="title" label="商品介绍" width="180">
        </el-table-column>
        <el-table-column prop="price" label="商品单价"> </el-table-column>
        <el-table-column prop="imgUrl" label="商品图片">
          <template slot-scope="scope">
            <el-popover placement="right" title="" trigger="hover">
            <img :src="scope.row.imgUrl" style="height: 400px;">
              <img
                slot="reference"
                :src="scope.row.imgUrl"
                min-width="70"
                height="70"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="buyList.length"
      >
      </el-pagination>
    </el-card>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="buyForm"
      >
        <el-form-item label="商品介绍">
          <el-input v-model="buyForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品单价">
          <el-input v-model="buyForm.price"></el-input>
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="buyForm.imgUrl"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Product",

  data() {
    return {
      buyForm: {
        id: "",
        title: "",
        price: "",
        imgUrl: "",
      },
      buyList: [],
      dialogVisible: false,
      labelPosition: "right",
      dialogTitle: "",
      pageSize: 5,
      currentPage: 1,
      tableData: [],
      tableList: [],
      searchlist: [],
      inputText: "",
      imgList: [],
    };
  },
  created() {
    this.setSlist(this.tableData);
  },
  mounted() {
    this.getAllProduct();
  },

  methods: {
    setSlist(arr) {
      this.tableList = JSON.parse(JSON.stringify(arr));
    },
    search() {
      this.$axios.get("/buyList").then((res) => {
        if (this.inputText) {
          this.tableData = res.data;
          var slist = [];
          this.tableData.forEach((item) => {
            if (item.desc.indexOf(this.inputText) > -1 && !item.isDelete) {
              this.buyList = slist;
              slist.push(item);
            } else if (!item.isDelete) {
              this.searchlist.push(item);
            }
          });
          this.setSlist(slist);
        } else {
          this.searchlist = [];
          this.tableData.forEach((item) => {
            if (!item.isDelete) {
              this.searchlist.push(item);
              this.setSlist(this.searchlist);
            }
          });
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getAllProduct() {
      this.$axios.get("/buyList").then((res) => {
        this.buyList = res.data;
      });
    },
    handleEdit(row) {
      this.dialogTitle = "编辑";
      this.buyForm.id = row.id;
      this.buyForm.title = row.title;
      this.buyForm.price = row.price;
      this.buyForm.imgUrl = row.imgUrl;
      this.dialogVisible = true;
    },
    handleDelete(id) {
      this.$axios
        .delete("/buyList/" + id)
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getAllProduct();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleAdd() {
      this.buyForm.title = "";
      this.buyForm.price = "";
      this.buyForm.imgUrl = "";
      this.dialogTitle = "添加商品";
      this.dialogVisible = true;
    },
    submit() {
      if (this.buyForm.id > 0) {
        let data = {
          id: this.buyForm.id,
          title: this.buyForm.title,
          price: this.buyForm.price,
          imgUrl: this.buyForm.imgUrl,
        };
        this.$axios.put("/buyList/" + this.buyForm.id, data).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: "编辑商品成功",
              type: "success",
            });
            this.getAllProduct();
            this.dialogVisible = false;
          } else {
            this.$message.error("编辑商品失败");
          }
        });
      } else {
        let data = {
          id: this.buyForm.id,
          title: this.buyForm.title,
          price: this.buyForm.price,
          imgUrl: this.buyForm.imgUrl,
        };
        if(this.buyForm.title != ""){
          this.$axios.post("/buyList", data).then((res) => {
            if (res.status == 201) {
              this.dialogVisible = false;
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.getAllProduct();
            } else {
              this.$message.error("添加失败");
            }
          });
        }else{
           this.$message.error("商品不能为空哦~");
        }
      }
    },
  },
};
</script>

<style scoped>
</style>